<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="./js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<nav class="navbar navbar-default navbar-inverse">
		  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">口红商品列表</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		       <li class="active"><a href="#">主页面 <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">其他页面</a></li>
		       
		      </ul>
		     
			 <ul id ="is-login" class ="hide nav navbar-nav navbar-right">
			 	<li><a href="">欢迎你，<b></b></a></li>
			 	<li><a href="" id ="logout">退出登录</a><b></b></li>
			 </ul>
		    <ul id="un-login" class=" nav navbar-nav navbar-right">
		      <li><a href="./html/login.html">登录</a></li>
		      <li><a href="./html/register.html">注册</a></li>
		      </ul>
			 
			  
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		<div class="container">
			<button type="button" class="btn btn-add btn-primary" data-toggle="modal" data-target="#addModal">添加商品</button>
		<table class="table table-shop table-striped table-bordered table-hover table-condensed" >
			<thead>
				<tr>
					<th>编号</th>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>商品数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="shop-tbody">
				
			</tbody>
		</table>
		</div>
		
		
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">添加商品</h4>
		      </div>
		      <div class="modal-body">
		        <form class="form-horizontal">
		          <div class="form-group">
		            <label for="inputName" class="col-sm-2 control-label">商品名称</label>
		            <div class="col-sm-10">
		              <input type="text" class="form-control" id="inputName" placeholder="请输入商品名称">
		            </div>
		          </div>
		          <div class="form-group">
		            <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
		            <div class="col-sm-10">
		              <input type="text" class="form-control" id="inputPrice" placeholder="请输入商品价格">
		            </div>
		          </div>
		          <div class="form-group">
		            <label for="inputNum" class="col-sm-2 control-label">商品数量</label>
		            <div class="col-sm-10">
		              <input type="text" class="form-control" id="inputNum" placeholder="请输入商品数量">
		            </div>
		          </div>
		        </form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="btn-add">添加</button>
		      </div>
		    </div>
		  </div>
		</div>
		<script type="text/javascript">
			var unLogin = document.querySelector("#un-login")
			var isLogin = document.querySelector('#is-login')
			var nameWarp = document.querySelector('#is-login b')
			var logout = document.querySelector('#logout')
			var username = utils.getCookie('name')
			if(username){
				unLogin.classList.add('hide')
				isLogin.classList.remove('hide')
				nameWarp.innerHTML = username
			}
			logout.addEventListener('click', function(){
				if(confirm('确定要退出吗？')){
					utils.setCookie('name', '', {expires:-1, path:'/'})
					unLogin.classList.remove('hide')
					isLogin.classList.add('hide')
				}
				
			})
		</script>
		<script src="./libs/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./libs/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/select.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/edit.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/add.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/cancel.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/delete.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
